<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="title">
        <span class="active"><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label>请输入手机号：</label>
            <input type="text">
        </div>
        <button class="tow">下一步</button>
    </div>
    <!----------------------------------------------------->
    <br>
    <hr>
    <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span class="active"><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label> 用户名：</label>
            <input type="text" class="one" value="" disabled>
        </div>
        <div class="input-item">
            <label> 手机号：</label>
            <input type="text" class="one" value="" disabled>
        </div>
        <div class="input-item">
            <label>密保问题：</label>
            <input type="text" class="one" value="" disabled>
        </div>
        <div class="input-item">
            <label>密保答案：</label>
            <input type="text" class="thenn">
        </div>
        <button class="top">上一步</button>
        <button class="bottom">下一步</button>
    </div>
    <!----------------------------------------------------->
    <br>
    <hr>
    <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span class="active"><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label>请输入新密码：</label>
            <input type="text" class="mima">
        </div>
        <button>上一步</button>
        <button class="chongzhi">立即重置</button>
    </div>

</body>
<script src="../jquery.js"></script>
<script>
    $('.input-item').siblings('.tow').on('click', function (e) {
        let n = $(".input-item input").val()
        getYan(n)
    })


    function getYan(n) {
        $.ajax({
            method: 'get',
            url: 'http://124.223.14.236:3001/api/user/findPwd',
            data: {
                phone: n
            },
            success(res) {
                console.log(res);
                if (!res.success) {
                    $('.one').prop('disabled', 'true')
                    return alert('您输入的手机号并没有注册过,请进行下一步操作')
                } else {
                    $('.one').prop('disabled', '')
                }
            }
        })
    }


    $('.bottom').on('click', function () {
        let m1 = $('.one')[0].value
        // console.log(m1);
        let m2 = $('.one')[1].value
        let m3 = $('.one')[2].value
        let n = $(".input-item input").val()
        // getYan(n)
        $.ajax({
            method: 'get',
            url: 'http://124.223.14.236:3001/api/user/findPwd',
            data: {
                phone: n
            },
            success(res) {
                let n = res.data.id
                 console.log(n);
                if (m1 !== res.data.username) {
                    alert('用户名输入错误')
                } else if (m2 !== res.data.phone) {
                    alert('手机号输入错误')
                } else if (m3 !== res.data.question) {
                    alert('密保问题有误')
                } else {
                    alert('获取成功')
                }
               miBao(n)
            }
        })
        // miBao()
    })
    $('.chongzhi').on('click', function () {
        let n = $(".input-item input").val()
        $.ajax({
            method: 'get',
            url: 'http://124.223.14.236:3001/api/user/findPwd',
            data: {
                phone: n
            },
            success(res) {
            let n = res.data.id
               miBao(n)
            }
        })

    })
    function miBao(n) {
        let m4 = $('.thenn').val()
        console.log(n);
        let mima=$('.mima').val()
        $.ajax({
            method: 'post',
            url: 'http://124.223.14.236:3001/api/user/resetPwd',
            data: {
                id:n,
                password: mima,
                answer: m4
            },
            success(res) {
                console.log(res);
                   if(res.success===false){
                    alert('密保答案输入错误')
                   }
            }
        })
    }
</script>

</html>